<template>
  <view>
    <uni-nav-bar height="175rpx" :border="false" @clickLeft="clickLeft" @clickRight="clickRight" backgroundColor="#0E55ED">
    	<template v-slot:left>
    	  <view>
    	    <uni-icons type="back" color="#fff" size="18" />
    	  </view>
    	</template>
    	<view class="input-view">
    		<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
    		<input confirm-type="search" class="nav-bar-input" type="text" placeholder="搜索您心目中的盆栽..."
    			@confirm="confirm" />
    	</view>
    	<template v-slot:right>
    		<view class="city">
    			搜索
    		</view>
    	</template>
    </uni-nav-bar>
    <view class="main">
      <view class="tab">
        <view class="view" @click="changeTab(1)">
          <view :class="tabIndex==1?'texted':'text'">
            植物
          </view>
        </view>
        <view class="view" @click="changeTab(2)">
          <view :class="tabIndex==2?'texted':'text'">
            花盆
          </view>
        </view>
        <view class="view" @click="changeTab(3)">
          <view :class="tabIndex==3?'texted':'text'">
            组合景观
          </view>
        </view>
        <view class="view" @click="changeTab(4)">
          <view :class="tabIndex==4?'texted':'text'">
            艺术景观
          </view>
        </view>
        <view class="view" @click="changeTab(5)">
          <view :class="tabIndex==4?'texted':'text'">
            艺术盆
          </view>
        </view>
      </view>
      <view class="filter" @click="handlefilter">
        <view class="icon">
          <image src="../../static/prebook/shaixuantiaojian.png" mode=""></image>
        </view>
        <view class="text">
          筛选
        </view>
      </view>
    </view>
    <view class="tag">
      <view class="view" @click="changeTab(1)">
        <view :class="tabIndex==1?'texted':'text'">
          大盆载
        </view>
      </view>
      <view class="view" @click="changeTab(2)">
        <view :class="tabIndex==2?'texted':'text'">
          中盆载
        </view>
      </view>
      <view class="view" @click="changeTab(3)">
        <view :class="tabIndex==3?'texted':'text'">
          小盆载
        </view>
      </view>
      <view class="view" @click="changeTab(4)">
        <view :class="tabIndex==4?'texted':'text'">
          兰花
        </view>
      </view>
      <view class="view" @click="changeTab(5)">
        <view :class="tabIndex==4?'texted':'text'">
          盆栽
        </view>
      </view>
    </view>
    <view class="content">
      <view class="view">
        <view class="img">
          <image src="../../static/prebook/temp1.png" mode=""></image>
          <view class="tag">
            货源紧缺
          </view>
          <view class="love">
            <image src="../../static/prebook/xiai.png" mode=""></image>
          </view>
        </view>
        <view class="text">
          特大散尾葵
        </view>
      </view>
      <view class="view">
        <view class="img">
          <image src="../../static/prebook/temp1.png" mode=""></image>
          <view class="tag">
            货源紧缺
          </view>
          <view class="love">
            <image src="../../static/prebook/xiai.png" mode=""></image>
          </view>
        </view>
        <view class="text">
          特大散尾葵
        </view>
      </view>
      <view class="view">
        <view class="img">
          <image src="../../static/prebook/temp1.png" mode=""></image>
          <view class="tag">
            货源紧缺
          </view>
          <view class="love">
            <image src="../../static/prebook/xiai.png" mode=""></image>
          </view>
        </view>
        <view class="text">
          特大散尾葵
        </view>
      </view>
      <view class="view">
        <view class="img">
          <image src="../../static/prebook/temp1.png" mode=""></image>
          <view class="tag">
            货源紧缺
          </view>
          <view class="love">
            <image src="../../static/prebook/xiai.png" mode=""></image>
          </view>
        </view>
        <view class="text">
          特大散尾葵
        </view>
      </view>
      <view class="view">
        <view class="img">
          <image src="../../static/prebook/temp1.png" mode=""></image>
          <view class="tag">
            货源紧缺
          </view>
          <view class="love">
            <image src="../../static/prebook/xiai.png" mode=""></image>
          </view>
        </view>
        <view class="text">
          特大散尾葵
        </view>
      </view>
      <view class="view">
        <view class="img">
          <image src="../../static/prebook/temp1.png" mode=""></image>
          <view class="tag">
            货源紧缺
          </view>
          <view class="love">
            <image src="../../static/prebook/xiai.png" mode=""></image>
          </view>
        </view>
        <view class="text">
          特大散尾葵
        </view>
      </view>
      <view class="view">
        <view class="img">
          <image src="../../static/prebook/temp1.png" mode=""></image>
          <view class="tag">
            货源紧缺
          </view>
          <view class="love">
            <image src="../../static/prebook/xiai.png" mode=""></image>
          </view>
        </view>
        <view class="text">
          特大散尾葵
        </view>
      </view>
      <view class="view">
        <view class="img">
          <image src="../../static/prebook/temp1.png" mode=""></image>
          <view class="tag">
            货源紧缺
          </view>
          <view class="love">
            <image src="../../static/prebook/xiai.png" mode=""></image>
          </view>
        </view>
        <view class="text">
          特大散尾葵
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="img">
        <image src="../../static/design/default.png" mode=""></image>
      </view>
      <view class="text">
        <view class="oneview">
          <view>
            广州仓库(60km)
          </view>
          <view class="icon">
            <view class="img">
               <image src="../../static/prebook/baiseqiehuan.png" mode=""></image>
            </view>
            <view>
              切换
            </view>
          </view>
        </view>
        <view class="twoview">
          <view>
            货源充足(1000)
          </view>
          <view>
            货源紧凑(100)
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const clickLeft = () => {
    console.log('clickLeft')
  }
  const clickRight = () => {
    console.log('clickRight')
  }
  const confirm = () => {
    console.log('选择confirm')
  }
  const tabIndex = ref(1)
  const changeTab = (e) => {
    console.log('选择tabIndex', e)
    tabIndex.value = e
    console.log('tabIndex.value', tabIndex.value)
  }
  const handlefilter = () => {
    console.log('筛选')
  }
</script>

<style lang="scss" scoped>
  $nav-height: 30px;
  .box-bg {
  	background-color: #F5F5F5;
  	padding: 5px 0;
  }
  
  .city {
  	/* #ifndef APP-PLUS-NVUE */
  	display: flex;
  	/* #endif */
  	flex-direction: row;
  	align-items: center;
  	justify-content: flex-start;
  	// width: 160rpx;
  	margin-left: 4px;
    color: #fff;
  }
  
  .input-view {
  	/* #ifndef APP-PLUS-NVUE */
  	display: flex;
  	/* #endif */
  	flex-direction: row;
  	// width: 500rpx;
  	flex: 1;
  	background-color: #f8f8f8;
  	height: $nav-height;
  	border-radius: 15px;
  	padding: 0 15px;
  	flex-wrap: nowrap;
  	margin: 7px 0;
  	line-height: $nav-height;
    margin-top: 75rpx;
  }
  
  .input-uni-icon {
  	line-height: $nav-height;
  }
  
  .nav-bar-input {
  	height: $nav-height;
  	line-height: $nav-height;
  	/* #ifdef APP-PLUS-NVUE */
  	width: 370rpx;
  	/* #endif */
  	padding: 0 5px;
  	font-size: 12px;
  	background-color: #f8f8f8;
  }
  .main{
    display: flex;
    .tab{
      width: 650rpx;
      display: flex;
      height: 80rpx;
      // border: 1px solid red;
      background-color: #fff;
      flex-wrap:nowrap;
      overflow-x: scroll;
      .view{
        width: 150rpx;
        height: 80rpx;
        // border: 1rpx solid green;
        flex: none;
        display: flex;
        justify-content: center;
        align-items: center;
        .text{
          color:#000;
          // height: 60rpx;
          border-bottom: 5rpx solid #fff;
          margin-top: 5rpx;
          
        }
        .texted{
          color:#000;
          // height: 60rpx;
          border-bottom: 5rpx solid rgb(14,85,237);
          font-weight: 700;
          margin-top: 5rpx;
        }
      }
    }
    .filter{
      width: 150rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(255,240,243);
      .icon{
        width: 40rpx;
        height: 40rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .text{
        color:rgb(14,85,237);
        font-weight: 700;
        margin-top: 5rpx;
        margin-left: 5rpx;
      }
    }
  }
  .tag{
    display: flex;
    width: 750rpx;
    display: flex;
    height: 80rpx;
    // border: 1px solid red;
    background-color: #fff;
    flex-wrap:nowrap;
    overflow-x: scroll;
    margin-top: 5rpx;
    .view{
      // width: 150rpx;
      padding: 0 20rpx;
      height: 50rpx;
      // border: 1rpx solid green;
      flex: none;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(225,225,225);
      border-radius: 5rpx;
      margin-right: 20rpx;
      margin-left: 10rpx;
      .text{
        color:rgb(184,184,187);
        margin-top: 5rpx;
        
      }
      .texted{
        color:rgb(184,184,187);
        margin-top: 5rpx;
      }
    }
    .filter{
      width: 150rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(255,240,243);
      .icon{
        width: 40rpx;
        height: 40rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .text{
        color:rgb(14,85,237);
        font-weight: 700;
        margin-top: 5rpx;
        margin-left: 5rpx;
      }
    }
  }
.content{
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  padding: 10rpx;
  .view{
    width: 240rpx;
    height: 400rpx;
    // border: 1rpx solid red;
    
    .img{
      width: 240rpx;
      height: 350rpx;
      position: relative;
      overflow: hidden;
      image{
        width: 100%;
        height: 100%;
      }
      .tag{
        position: absolute;
        top: 0;
        left:0;
        background-color: rgb(245,191,80);
        padding: 5rpx;
        height: 100%;
        width: 40rpx;
        color: #fff;
        height: auto;
        writing-mode:sideways-rl;
        border-radius: 5rpx;
      }
      .love{
        position: absolute;
        top: 0;
        right: 0;
        width: 30rpx;
        height: 30rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
    .text{
      width: 240rpx;
      height: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
    }
  }
}
.bottom{
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0,0, 0.5);
  .img{
    width: 150rpx;
    height: 100rpx;
    // border: 1rpx solid red;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .text{
    width: 550rpx;
    height: 100rpx;
    // border: 1rpx solid red;
    display: flex;
    flex-wrap: wrap;
    padding: 0 20rpx;
    .oneview{
      width: 550rpx;
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      color: #fff;
      .icon{
        display: flex;
        .img{
          width: 30rpx; 
          height: 30rpx;
          // border: 1rpx solid red;
          margin-top: 5rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
        
      }
    }
    .twoview{
      width: 550rpx;
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      color: #fff;
    }
  }
}
</style>